<template>
  <view class="content">
    <!-- 建议栏 -->
    <view class="recommendation-bar">
      <view class="recommendation-label">
        <text class="label-text">晓安提醒</text>
      </view>
      <view class="recommendation-content">
        <text class="recommendation-text">建议您重点关注：</text>
        <view class="highlight-parts">
          <text class="highlight-part lung-color">肺部</text>
          <text class="highlight-part stomach-color">胃部</text>
          <text class="highlight-part nerve-color">神经系统</text>
        </view>
      </view>
      <view class="assistant-avatar">
        <image class="avatar-image" src="../../static/logo/XiaoAn.png" mode="aspectFill"></image>
      </view>
    </view>

    <view class="body-parts-container">
      <!-- 大脑区域 -->
      <view class="body-part-box brain" @click="handlePartClick('brain')">
        <text class="part-name">脑</text>
        <image class="part-image" src="../../static/part/大脑.png"></image>
      </view>

      <!-- 肺部区域 -->
      <view class="body-part-box lung" @click="handlePartClick('lung')">
        <text class="part-name">肺</text>
        <image class="part-image" src="../../static/part/肺部.png"></image>
      </view>

      <!-- 心脏区域 -->
      <view class="body-part-box heart" @click="handlePartClick('heart')">
        <text class="part-name">心脏</text>
        <image class="part-image" src="../../static/part/心脏.png"></image>
      </view>

      <!-- 肝脏区域 -->
      <view class="body-part-box liver" @click="handlePartClick('liver')">
        <text class="part-name">肝</text>
        <image class="part-image" src="../../static/part/肝脏.png"></image>
      </view>

      <!-- 胃部区域 -->
      <view class="body-part-box stomach" @click="handlePartClick('stomach')">
        <text class="part-name">胃</text>
        <image class="part-image" src="../../static/part/胃.png"></image>
      </view>

      <!-- 肾脏区域 -->
      <view class="body-part-box kidney" @click="handlePartClick('kidney')">
        <text class="part-name">肾</text>
        <image class="part-image" src="../../static/part/肾脏.png"></image>
      </view>

      <!-- 神经区域 -->
      <view class="body-part-box nerve" @click="handlePartClick('nerve')">
        <text class="part-name">神经</text>
        <image class="part-image" src="../../static/part/神经.png"></image>
      </view>

      <!-- 肠道区域 -->
      <view class="body-part-box intestine" @click="handlePartClick('intestine')">
        <text class="part-name">肠</text>
        <image class="part-image" src="../../static/part/肠道.png"></image>
      </view>

      <!-- 腺体区域 -->
      <view class="body-part-box gland" @click="handlePartClick('gland')">
        <text class="part-name">腺体</text>
        <image class="part-image" src="../../static/part/腺体.png"></image>
      </view>

      <!-- 血液区域 -->
      <view class="body-part-box blood" @click="handlePartClick('blood')">
        <text class="part-name">血液</text>
        <image class="part-image" src="../../static/part/血液.png"></image>
      </view>

      <!-- 生殖器官区域 -->
      <view class="body-part-box reproductive" @click="handlePartClick('reproductive')">
        <text class="part-name">生殖器官</text>
        <image class="part-image" src="../../static/part/性别.png"></image>
      </view>

      <!-- 五官区域 -->
      <view class="body-part-box sensory" @click="handlePartClick('sensory')">
        <text class="part-name">五官</text>
        <image class="part-image" src="../../static/part/五官科.png"></image>
      </view>
    </view>

    <!-- 详细信息区域 -->
    <view class="details-section" v-if="currentPart">
      <view class="part-details">
        <view class="part-details-header">
          <view class="part-details-title">
            <image class="part-icon" :src="currentPart.image" mode="aspectFit"></image>
            <text class="part-title">{{ currentPart.name }}</text>
          </view>
          <view class="part-status">
            <text class="status-score">{{ currentPart.score }}</text>
            <text class="status-text">{{ currentPart.statusText }}</text>
          </view>
        </view>
        <view class="part-question">
          <text class="question-text">{{ currentPart.question }}</text>
        </view>
        <view class="action-buttons">
          <button class="action-btn improve-btn" @click="goToPlanning">提升分数</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bodyParts: {
        brain: {
          name: '大脑',
          image: '../../static/part/大脑.png',
          score: 99,
          statusText: '状态良好',
          question: '你的大脑状态良好，但仍需注意保持充足的睡眠和适当的脑力锻炼。'
        },
        lung: {
          name: '肺',
          image: '../../static/part/肺部.png',
          score: 85,
          statusText: '需要注意',
          question: '建议多进行有氧运动，保持呼吸道健康。'
        },
        heart: {
          name: '心脏',
          image: '../../static/part/心脏.png',
          score: 90,
          statusText: '状态良好',
          question: '心脏功能正常，建议保持规律运动。'
        },
        liver: {
          name: '肝',
          image: '../../static/part/肝脏.png',
          score: 88,
          statusText: '状态良好',
          question: '肝功能正常，注意作息规律，少熬夜。'
        },
        stomach: {
          name: '胃',
          image: '../../static/part/胃.png',
          score: 82,
          statusText: '需要注意',
          question: '注意饮食规律，不要暴饮暴食。'
        },
        kidney: {
          name: '肾',
          image: '../../static/part/肾脏.png',
          score: 95,
          statusText: '状态良好',
          question: '肾功能良好，建议多喝水，保持充足睡眠。'
        },
        nerve: {
          name: '神经',
          image: '../../static/part/神经.png',
          score: 87,
          statusText: '状态良好',
          question: '神经系统功能正常，建议保持心情愉悦。'
        },
        intestine: {
          name: '肠',
          image: '../../static/part/肠道.png',
          score: 86,
          statusText: '状态良好',
          question: '消化功能正常，建议多吃富含纤维的食物。'
        },
        gland: {
          name: '腺体',
          image: '../../static/part/腺体.png',
          score: 89,
          statusText: '状态良好',
          question: '内分泌功能正常，保持规律作息。'
        },
        blood: {
          name: '血液',
          image: '../../static/part/血液.png',
          score: 92,
          statusText: '状态良好',
          question: '血液循环良好，建议保持适度运动。'
        },
        reproductive: {
          name: '生殖器官',
          image: '../../static/part/性别.png',
          score: 91,
          statusText: '状态良好',
          question: '生殖系统健康，保持良好的生活习惯。'
        },
        sensory: {
          name: '五官',
          image: '../../static/part/五官科.png',
          score: 93,
          statusText: '状态良好',
          question: '五官功能正常，注意用眼卫生。'
        }
      },
      currentPart: null
    }
  },
  onLoad() {
    // 初始化显示大脑数据
    this.currentPart = this.bodyParts.brain;
  },
  methods: {
    handlePartClick(partKey) {
      this.currentPart = this.bodyParts[partKey];
      console.log("选中部位:", partKey);
      console.log("当前部位图片:", this.currentPart.image);
    },
    goToPlanning() {
      // 跳转到调理安排页面
      uni.navigateTo({
        url: '/pages/conditioning/conditioning'
      });
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.body-parts-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20rpx;
  width: 100%;
  margin-bottom: 30rpx;
}

.body-part-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 15rpx;
  height: 180rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  position: relative;
}

.part-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.part-image {
  width: 90rpx;
  height: 90rpx;
  object-fit: contain;
}

/* 详细信息区样式 */
.details-section {
  width: 100%;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.part-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.part-details-title {
  display: flex;
  align-items: center;
}

.part-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 10rpx;
}

.part-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.part-status {
  display: flex;
  align-items: center;
}

.status-score {
  font-size: 36rpx;
  font-weight: bold;
  color: #58cc02;
  margin-right: 10rpx;
}

.status-text {
  font-size: 26rpx;
  color: #666;
}

.part-question {
  background-color: #f0f8ff;
  padding: 15rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.question-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.action-buttons {
  display: flex;
  justify-content: center;
  margin: 20rpx 0;
  width: 100%;
}

.action-btn {
  width: 70%;
  padding: 15rpx 0;
  border: none;
  border-radius: 30rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #ffffff;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.improve-btn {
  background-color: #ff9600;
}

/* 器官特定颜色 */
.brain {
  border-top: 4rpx solid #ce82ff;
  /* 紫色 */
}

.lung {
  border-top: 4rpx solid #1cb0f6;
  /* 蓝色 */
}

.heart {
  border-top: 4rpx solid #ff4b4b;
  /* 红色 */
}

.liver {
  border-top: 4rpx solid #58cc02;
  /* 绿色 */
}

.stomach {
  border-top: 4rpx solid #ff9600;
  /* 橙色 */
}

.kidney {
  border-top: 4rpx solid #7e57c2;
  /* 深紫色 */
}

.nerve {
  border-top: 4rpx solid #2196f3;
  /* 蓝色 */
}

.intestine {
  border-top: 4rpx solid #8bc34a;
  /* 淡绿色 */
}

.gland {
  border-top: 4rpx solid #9c27b0;
  /* 紫色 */
}

.blood {
  border-top: 4rpx solid #e91e63;
  /* 粉红色 */
}

.reproductive {
  border-top: 4rpx solid #3f51b5;
  /* 靛蓝色 */
}

.sensory {
  border-top: 4rpx solid #009688;
  /* 青色 */
}

/* 建议栏样式 */
.recommendation-bar {
  width: 100%;
  background: linear-gradient(to right, #f6f9ff, #e6f7ff);
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-left: 8rpx solid #1cb0f6;
}

.recommendation-label {
  position: absolute;
  top: -12rpx;
  left: 30rpx;
  background-color: #1cb0f6;
  color: white;
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.recommendation-content {
  flex: 1;
  padding-top: 15rpx;
}

.recommendation-text {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  line-height: 1.5;
}

.highlight-parts {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.highlight-part {
  margin-right: 20rpx;
  font-size: 32rpx;
  font-weight: bold;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}

.lung-color {
  color: #1cb0f6;
  background-color: rgba(28, 176, 246, 0.1);
}

.stomach-color {
  color: #ff9600;
  background-color: rgba(255, 150, 0, 0.1);
}

.nerve-color {
  color: #2196f3;
  background-color: rgba(33, 150, 243, 0.1);
}

.assistant-avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 45rpx;
  overflow: hidden;
  margin-left: 20rpx;
  border: 4rpx solid white;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.avatar-image {
  width: 100%;
  height: 100%;
}
</style>